<template>
  <div class="active">
    <el-form :model="formdata">
      <el-form-item>
        <el-input v-model="formdata.test" placeholder='输入店铺名称'></el-input>
      </el-form-item>
      <el-button class="chande" @click="search">搜索</el-button>
      <el-button @click="replacement">重置</el-button>
        <el-button
          class="el-icon-plus"
          @click="eminct"
          >新增店铺</el-button
        >
    </el-form>
       <el-table
      :data="list"
      style="width: 100%">
       <el-table-column
        type="index"
        label="编号"
        width="130">
      </el-table-column>
      <el-table-column
        prop="account"
        label="账号"
        width="170">
      </el-table-column>
      <el-table-column
        prop="kfPhone"  
        label="客服手机号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="店铺名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="reg"
        label="所在城市">
      </el-table-column>
      <template>
      </template>
         <el-table-column
        prop="detailAddress"
        label="店铺详细地址">
      </el-table-column>
         <el-table-column
        prop="status"
        label="是否启用">
        <template v-slot="{row}">
            <el-switch
         v-model="row.status"
         active-color="#ff7144"
         @change="forbidden(row)">
       </el-switch>
        </template>
      </el-table-column>
          <el-table-column
          fixed="right"
        prop="address"
        width="180"
        label="操作">
        <template v-slot='{row}'>
          <el-button type="text" size="small" @click="examine(row)">查看</el-button>
          <el-button type="text" size="small" @click="menus(row)">分配角色</el-button>
          <el-button type="text" size="small" @click="hcompile(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        class="lyx"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.index"
        :page-size="5"
        layout="prev, pager, next, jumper"
      >
      </el-pagination>
  <el-dialog :title="isedit ? '编辑店铺': '添加店铺'"
  :destroy-on-close='true' 
  :close-on-click-modal='false' 
  :visible.sync="dialogFormVisible"
  v-if="dialogFormVisible">
    <Suerent @close='hclone' :isedit="isedit" :isEditad="isEditad" :childata="childata"></Suerent>
</el-dialog>
  <!-- 分配角色组件 -->
    <el-dialog title="分配角色"
      class="acvter"
     :destroy-on-close='true' 
     :close-on-click-modal='false'
     :visible.sync="dialogFormVisib">
     <Bound @close="dialogFormVisib = false" :childata="childata"></Bound>
     </el-dialog>
  </div>
</template>
<script>
import Suerent from './components/suerent.vue';
import Bound from './components/bound.vue'
import {provider,prohibited,using} from '@/api/limits'

export default {
  components: { Suerent,Bound },
  data(){
    return {
     isedit:false,
     isEditad:false,
     dialogFormVisible:false,
     // outerVisible:false,
     dialogFormVisib:false,
     list:[],
     childata:{},
     formdata:{
      test:''
     },
     q:{
      index:1,
      size:10,
      name:''
     },
     info:[],
    }
  },
created(){
 this.loachgeitb()

},
   methods:{
   async loachgeitb(){
        const res = await provider(this.q)
        this.list = res.data.data
        for(let i = 0; i < this.list.length; i++){
          this.info[i] = JSON.parse(this.list[i].region)
             this.list[i]['reg'] = this.info[i].city+ ' ' +this.info[i].county
          // this.list[i].region = this.info[i].county
          // this.list[i].region.city = this.info[i].city
          // this.list[i].region.county = this.info[i].county
        }
        
    },
   
    // 新增
    eminct(){
      this.dialogFormVisible = true
      this.isedit = false
      this.isEditad = false
    },
    // 编辑
    hcompile(row){
      this.dialogFormVisible = true
      this.isedit = true
      this.childata = row
      this.isEditad = false
     
    },
    // 分配菜单
    menus(row){
       this.dialogFormVisib = true
       this.childata = row
    },
    hclone(){
    this.dialogFormVisible = false
    this.loachgeitb()
    },
    // 启用 禁用
   async forbidden(row){

       if(row.status == false){
        const params = new URLSearchParams();
        params.append("shopId",row.id);
        const rea = await prohibited(params)
        this.$message.success(rea.msg)
        this.loachgeitb()
      } else{
          const paramd = new URLSearchParams();
        paramd.append("shopId",row.id);
        const rem = await using(paramd)
        this.$message.success(rem.msg)
        this.loachgeitb()
      }
       
    },
    // 搜索
    search(){
      this.q.name = this.formdata.test
      this.loachgeitb()
    },
    // 重置
      replacement(){
        this.q.index = 1
        this.q.name = ''
        this.formdata.test = ''
        this.loachgeitb()
      },
    // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loachgeitb();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loachgeitb();
    },
    // 查看详情
    examine(row){
        this.dialogFormVisible = true
       this.childata = row
       this.isEditad = true
    }
   }
}
</script>

<style scoped>
.active{
  background-color: #fff;
  padding: 30px 20px;
}
 .el-form-item{
  width: 15% !important;
  display: inline-block;
  margin-right: 20px;

}

.chande{
  display: inline-block;
  background-color: #ff7144;
  color: #fff;
  border: 1px solid #ff7144;
}
.el-icon-plus {
  color: #ff7144;
  position: absolute;
  right: 5%;
  border: 1px solid #ff7144;
}
.el-icon-plus:hover {
  background-color: #fff;
}
::v-deep .el-dialog{
  width: 640px !important;
  height: 70%;
  overflow: auto;
}
::v-deep .aiopedg{
  height: 500px;
  overflow: auto;
}
.acvter{
  height: 350px;
 overflow: hidden;
}
</style>